package.json、package-lock.json、node_modules
@ 取代 ./src
vite.config.js
index.html
npm init vue@latest ｜ npm init vue@3
透過 npm init vue@latest 後，按照內建提示進行，在選擇週邊工具時，額外選擇了 Vue Router、Pinia、ESLint 和 Prettier，最後建置出來的 Vue 專案資料夾如下：
hello-vite/
├── index.html
├── node_modules
├── package.json
├── package-lock.json
├── public
│ └── favicon.ico
├── README.md
├── src
│ ├── App.vue
│ ├── assets
│ │ ├── base.css
│ │ ├── logo.svg
│ │ └── main.css
│ ├── components
│ │ ├── HelloWorld.vue
│ │ ├── icons (略 - 放所有 icon 的 svg 檔)
│ │ ├── TheWelcome.vue
│ │ └── WelcomeItem.vue
│ ├── main.js
│ ├── router
│ │ └── index.js
│ ├── stores
│ │ └── counter.js
│ └── views
│ ├── AboutView.vue
│ └── HomeView.vue
└── vite.config.js
vite.config.jsnpm run dev)，Vite 會自動解析專案根目錄內的 vite.config.js，根據設定來打包專案import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
'@' 取代 './src'。用 vite 指令進行打包時，會進行預處理。index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
<body> 裡面已經有一個 div，id 為 app
<script> 指向 📂 src 下的 main.js
主要的檔案和程式碼都會放在這裡。
App.vue
.vue 檔是 Vue 特有的檔案類型main.jsimport { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './assets/main.css'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
App.vue，傳入 createApp() 中創建一個 Vue 實體，透過 .mount(#app) 將內容渲染到 HTML 上的 div#app 內favicon.ico
public/favicon.ico 應寫成 /favicon.ico
package.json & package-lock.jsonpackage.json 裡面會有 3 個預先寫好的 script 腳本，用來執行 Vite 相關指令 (指令作用後面會提到)"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173"
},
.gitignore:node_modules 寫在裡面package.json 安裝的所有套件(及套件相依套件)都會在這個資料夾下npm install 就可以根據 package.json 進行安裝所需套件vite.config.js 是 vite 的設定檔，可以用來客製化打包的需求；以官網建立的 Vue 專案為例，對路徑設定了別名，所以在專案路徑可以用 ＠ 取代 ./src
main.js 程式碼進入點，會在這裡創建 Vue 實例，並掛載到 DOM 上App.vue 網頁的根元件
iThome鐵人賽
看影片追技術